﻿@page "/test3"

<PageTitle>Css Sticky Table</PageTitle>

<h4>Test3</h4>

<ul class="text-danger">
    <li>
        使用 box-shadow 重绘边框后，会与 bootstrap .table-hover 产生冲突。
    </li>
    <li>
        因为 bootstrap .table-hover 是通过 box-shadow 来实现 hover 背景。
    </li>
</ul>

<img src="./images/2025-09-04_164952.jpg" width="640"/>

<div id="wrapper">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr style="">
                <td>2</td>
                <td style="box-shadow: inset 0 0 0 1px red;">2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
</div>
<br />
<div class="class1">
    hello
</div>
<br />
<div class="class2">
    hello
</div>

<style>

    #wrapper {
        width: 100%;
        height: 300px;
        overflow: auto;
    }

    .class1{
        background-color: #fff;
        box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.075);
    }

    .class2{
        background-color: rgba(var(--bs-emphasis-color-rgb), 0.075);
    }

</style>


@code {

}
